<template>
  <div class="w-[98%]">
    <div class="filter-section m-l-2">
      <el-select v-model="filter.expendType" placeholder="支出类型" style="width: 10%" clearable
                 @change="fetchData">
        <el-option v-for="item in getEnumBySn('ExpensesEnum')" :key="item.value" :label="item.label"
                   :value="item.value"/>
      </el-select>
      <el-input v-model="filter.memo" placeholder="备注" style="width: 10%"></el-input>
      <el-select v-model="filter.expendWay" placeholder="支出方式" style="width: 10%" clearable>
        <el-option v-for="item in getEnumBySn('payWay')" :key="item.value" :label="item.label"
                   :value="item.value"/>
      </el-select>
      <el-date-picker type="datetime" v-model="filter.startTime" value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="开始时间"/>
      <el-date-picker style="margin-left: 20px" type="datetime" v-model="filter.endTime"
                      value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间"/>
      <div style="display: flex;padding-top: 20px;padding-left: 20px;">
        <el-tag size="large" style="font-size: 20px;height: 30px">{{totalAccount}}</el-tag>
        <el-button type="primary" @click="fetchData()">查询</el-button>
        <el-button class="m-b-20px" style="width: 200px;" type="success" @click="addAgency()">
          新增支出
        </el-button>
        <!--        <el-button class="m-b-20px" style="width: 200px;" type="success" @click="addIncome">新增收入</el-button>-->
      </div>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column label="序号" width="60" align="center">
          <template #default="{ $index }">
            {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
          </template>
        </el-table-column>
        <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"
                         :label="column.label"
                         :width="column.width" :align="column.align"></el-table-column>
        <el-table-column label="操作" width="250" fixed="right" align="center">
          <template v-slot="scope">
            <el-button type="primary" @click="edit(scope.row)" size="mini">编辑</el-button>
            <el-button type="danger" @click="deleteItem(scope.row)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalItems"
                   @current-change="currentChange"
                   background layout="total,prev, pager, next" class="pagination" prev-text="上一页"
                   next-text="下一页"></el-pagination>
    <Modal ref="modalRef" @ok="select"/>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import request from '@/config/axios'
import Modal from "./ExpendModal.vue"
import {getEnumBySn} from "@/api/enums";


const filter = ref({});
const totalItems = ref(0);
const currentPage = ref(1);
const pageSize = ref(15);

const tableData = ref([]);
const active = ref('company')
const totalAccount = ref(0)
const columns = ref([
  {prop: 'expendType', label: '支出类型', width: '150', align: 'center'},
  {prop: 'expendWay', label: '支出方式', width: '100', align: 'center'},
  {prop: 'expendValue', label: '支出金额', width: '100', align: 'center'},
  {prop: 'expendTime', label: '支出时间', width: '200', align: 'center'},
  {prop: 'memo', label: '备注', width: '150', align: 'center'},
]);
const currentChange = (v) => {
  currentPage.value = v
  fetchData()
}
const fetchData = async function () {
  const response = await request.get({
    url: '/studioExpenses/list',
    params: {...filter.value, type: 'PERSON', current: currentPage.value, size: pageSize.value}
  })

  tableData.value = response.records
  totalItems.value = response.total
  currentPage.value = response.current

  const total = await request.get({
    url: '/studioExpenses/getTotalAmount',
    params: { ...filter.value, type:'PERSON' }
  })
  totalAccount.value = total

}
const modalRef = ref(null)
const addAgency = function () {
  modalRef.value?.add()
}

const edit = (row) => {
  modalRef.value?.edit(row)
}

const select = function () {
  fetchData()
}

async function deleteItem(row) {

  ElMessageBox.confirm('真的要删除吗！', '删除 ' + `${row.expendType} ${row.expendValue} 的所有数据吗？`, {
    confirmButtonText: 'OK',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      request.delete({
        url: '/studioExpenses/deleteById',
        params: {id: row.id}
      }).then(() => {
        this.fetchData()
      })
      ElMessage.success('删除成功')
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消退出',
      });
    });
}

onMounted(() => {
  fetchData(); //获取列表
});

const addIncome = function () {
  ElMessage.info("功能开发中")
}
</script>

<style scoped>
.filter-section {
  display: flex;
  align-items: center;
}

.filter-section > * {
  margin-right: 10px;
}

.pagination {
  margin-top: 20px;
  float: right;
  font-size: 22px;
}

.drawer-footer {
  text-align: right;
  margin-top: 20px;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
}

.form-inline .el-form-item {
  margin-right: 20px;
}
</style>
